<template>
  <div class="detail-page">
    <div class="detail-header">
        <span @click="$router.back()" class="detail-back">&lt;</span>
        <span style="margin: 0px auto;">面经详情</span>
    </div>
    <hr>
    <div class="detail-body" v-if="this.list.id">
        <div class="item-header">
            <p class="title" style="font-size: 25px;font-weight: 600;">{{ this.list.stem }}</p>
            <span>{{ this.list.createdAt }}|点赞{{ this.list.likeCount }}|浏览{{ this.list.views }}</span>
            <div class="other">
                <img :src="this.list.creatorAvatar" width="80px">
                <p class="other">{{ this.list.creatorName }}</p>
            </div>          
        </div>
        <div class="detail-body">
            {{ this.list.content }}
        </div>
    </div>
  </div>
</template>
<!--跳转传参到详细页 
    1.获取id
    2.使用axios根据id获取数据
 -->
<script>
import axios from 'axios'
export default {
    name:'ArticleDetail',
    data(){
        return{
            list: []
        }
    },
    async created() {
        // { }对返回结果解构，与data.data相当
        const {data} = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${this.$route.query.id}`);
        // console.log(data)
        this.list = data.result;
        // console.log(this.list)
  },
}
</script>

<style scoped>
    .detail-header{
        display: flex;
        justify-content: space-between;
    }
    .other{
        display: flex;
        align-items: center;
    } 
</style>